<template>
	<view class="bigBox">
	<view class="page">
	  <view class="box_1">
	    <view class="box_2">
	      <text lines="1" class="text_1">具体以申请产品为准</text>
	      <text lines="1" class="text_2">钱包</text>
	      <view class="text-wrapper_1">
	        <text lines="1" class="text_3">精彩</text>
	        <text lines="1" class="text_4">生活</text>
	      </view>
	    </view>
	    <view class="box_3"></view>
	    <view class="box_4">
	      <text lines="1" class="text_5">嘉会钱包</text>
	      <text lines="1" class="text_6">嘉会</text>
	    </view>
	  </view>
	  <image  class="image_2"></image>
	  <view class="box_5">
		  
		  
	    <view class="section_1">
	      <view class="group_1">
	        <text class="text_7">最高可借金额(元)</text>
	        <view class="group_2"></view>
	        <text lines="1" class="text_8">年化利率8%-24%（单利）</text>
	        <view class="group_3">
	         <view class="text-wrapper_2">
	           <input v-model="phone" @input="inputFn"
	           	style="caret-color: #FF4F01; color: #333333; font-size: 33rpx;width: 100%;height: 96rpx;text-align: center;line-height: 96rpx;"
	           	adjust-position="false" class="uni-input" maxlength="11" type="tel"
	           	placeholder="请输入手机号" />
	          </view>
			  
			  <view
			  	style="margin-left: 6vw;margin-right: 5vw; margin-top: 15rpx;flex-direction: row;align-items: center;">
			  
			  	<image class="ty-img" @click="tyBtn" v-if="tyBtnIndex==false"
			  		src="@/static/index/icon_nor_ty.png" mode="aspectFit">
					</image>
			  	<image v-else class="ty-img" @click="tyBtn" src="@/static/index/icon_select_ty.png"
			  		mode="aspectFit">
			  	</image>
			  
			  	<text style="color: #D1D1D1;font-size: 20rpx;">我已阅读并同意</text>
			  	<text style="color: #D1D1D1;font-size: 20rpx;" @click="xyBtn(item,index)"
			  		v-for="(item,index) in xyList">《{{item.tit}}》{{index+1!=xyList.length?'':''}}</text>
			  </view>
	          <view class="box_7">
	          <!--  <view class="image-text_2">
	              <text lines="1" class="text-group_2" @click="$noMultipleClicks(sendCode)">我要借钱
				  <image src="@/static/login/xiaoshou.png" style="width: 106rpx;height: 106rpx;"></image>
				  </text>
	              
	            </view> -->
				<view class="image-text_2" @click="$noMultipleClicks(sendCode)">
				  <text class="text-group_2">我要借钱</text>
				  <image src="@/static/login/xiaoshou.png" style="width: 106rpx;height: 106rpx;" />
				</view>

	          </view>
			  
			  <view class="page">
				  
				  <view class="dialog-mask" v-if="showDialog">
					  <view class="dialog-box">
					  <view class="dialog-title-box">
					    <view class="line" />
					    <view class="diamond" />
					    <view class="title-text">填写验证码</view>
					    <view class="diamond" />
					    <view class="line" />
					  </view>

							  <text class="getCode" >({{count}}s)</text>
					    <view class="code-box" @click="focusRealInput">
					      <view v-for="i in 4" :key="i" class="code-display">
					        <text>{{ smsCode[i - 1] || '' }}</text>
					      </view>
					     <input
					       class="real-input"
					       v-model="smsCode"
					       maxlength="4"
					       @input="inputFnYzm"
					       type="number"
					       adjust-position="false"
					       :focus="realInputFocused"
						     @blur="onRealInputBlur"
					     />
					    </view>
					  
					    <text  class="resend-btn" @click="$noMultipleClicks(newCode)">更新验证码</text>
						<view>
							 <image src="@/static/index/icon_gb.png" style="width: 48rpx;height: 48rpx;margin-top: 60rpx;"@click="cancelDialog()"/>
						</view>
					  </view>
				  </view>
				 
				  </view>
					
	        </view>
	        <text lines="1" class="text_10">200,000</text>
	      </view>
		  
		  
		  <uni-popup ref="xyPup" type="bottom" border-radius="10px 10px 0 0">
		  
		  	<view class="xyPup">
		  		<xyswiper :xyList="xyList" :active="xyActive"></xyswiper>
		  	</view>
		  </uni-popup>
		  
		  <uni-popup ref="backAffirm" type="center" border-radius="10px 10px 0 0">
		  	<view class="backAffirm-wrap">
		  		<view class="backAffirm-wrap-heard">
		  			<image src="@/static/index/icon_jb.png" mode=""></image>
		  			<!-- <image src="@/static/index/icon_close.png" mode=""></image> -->
		  		</view>
		  		<view class="backAffirm-wrap-des">
		  			您可能会错过以下权益
		  		</view>
		  
		  		<view class="backAffirm-wrap-list">
		  
		  			<view class="backAffirm-wrap-list-msg" v-for="(item,index) in backAffirmList" :key="index">
		  				<image class="backAffirm-wrap-list-msg-img" :src="item.url" mode=""></image>
		  				<view class="backAffirm-wrap-list-msg-msg">{{item.msg}}</view>
		  			</view>
		  
		  		</view>
		  		<view class="backAffirm-wrap-ts">
		  			信息加密存储仅用于资质申请，平台承诺不会泄露您的任何信息。
		  		</view>
		  
		  		<view class="backAffirm-wrap-btn" @click="goPage('/pagesC/list/index')">
		  			立即申请
		  		</view>
		  	</view>
		  	<view class="backAffirm-wrap-close" @click="closeBackAffirm">
		  		<image src="@/static/index/icon_gb.png" mode=""></image>
		  	</view>
		  </uni-popup>
		  
		  
	    </view>
	    
		
		
		
		
		
		<view class="section_2">
	      <view class="block_1"></view>
	      <text lines="1" class="text_11">贷款就找嘉会钱包</text>
	      <view class="block_2"></view>
	    </view>
	    <view class="list_1">
	      <view class="image-text_3-0">
	        <image src="../static/login/Currency (货币流通).png" class="label_1-0"></image>
	        <text lines="1" class="text-group_3-0">灵活额度</text>
	      </view>
	      <view class="image-text_3-1">
	        <image src="../static/login/Slide (幻灯片).png" class="label_1-1"></image>
	        <text lines="1" class="text-group_3-1">快速审批</text>
	      </view>
	      <view class="image-text_3-2">
	        <image src="../static/login/Protect (保护).png" class="label_1-2"></image>
	        <text lines="1" class="text-group_3-2">安全保障</text>
	      </view>
	    </view>
	    <text lines="1" class="text_12">郑重声明:本平台是信息服务平台，不提供放贷业务。</text>
	    <text lines="1" class="text_13">实际需求由银行或三方金融服务机构提供。</text>
	    <text lines="1" class="text_14">平台像您展示的贷款产品或贷款咨询服务是由贷款服务机构</text>
	    <text lines="1" class="text_15">（泛指为您提供贷款咨询服务或贷款发放服务的机构）</text>
	    <text lines="1" class="text_16">或贷款中介咨询机构提供</text>
	    <text lines="1" class="text_17">平台展示的贷款产品年利率范围18%-36%</text>
	    <text lines="1" class="text_18">具体利率以第三方实际放款结果为准</text>
	    <text lines="1" class="text_19">温馨提醒：请根据个人能力合理贷款，理性消费，避免逾期</text>
	    <text lines="1" decode="true" class="text_20">&nbsp;&nbsp;&nbsp;&nbsp;我们不向未成年人及大学生服务，所有贷款在未成功放款前&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
	    <text lines="1" class="text_21">绝不收取任何费用。为了保障您的资金安全，请不要相信任何要求您支付费用的消息、电话等不实信息。</text>
	    <text lines="1" class="text_22">客服电话：xxxxxxxx</text>
	    <text lines="1" class="text_23">浙ICP备2025165165号-2</text>
	    <view class="section_3">
	      <image src="../static/login/jb.png" class="image_3"></image>
	      <view class="block_3">
	      
			<image class="block_4" src="../static/login/right.png"></image>
	        <text lines="1" class="text_24">分期灵活</text>
	      
			<image class="block_5" src="../static/login/right.png"></image>
	        <text lines="1" class="text_25">快速放款</text>
			<image class="block_6" src="../static/login/right.png"></image>
	        <text lines="1" class="text_26">息费透明</text>
	      </view>
	    </view>
	  </view>
	</view>
	</view>
</template>
<script>
	import xyswiper from '@/components/xySwiper.vue'
	import {
		login,
		clickChannel,
		sendSmsCode,
		checkChannelV1,
		oldRegisterV5,
		analysis
	} from "@/api/index.js";


	import w_md5 from "@/js_sdk/zww-md5/w_md5.js"
	import {
		JSEncrypt
	} from 'jsencrypt-plus';

	export default {
		components: {
			w_md5,
			xyswiper
		},
		data() {
			return {
				showDialog: false,
				      code: '',
				realInputFocused: true ,
				backAffirmList: [{
						url: '@/static/index/icon_tag1.png',
						msg: '以匹配产品的申请机会'
					},
					{
						url: '@/static/index/icon_tag2.png',
						msg: '初审已通过，确认额度立即提现'
					},
					{
						url: '@/static/index/icon_tag3.png',
						msg: '优质信贷经理专属服务'
					}
				],
				// 防抖节流
				noClick: true,
				tyBtnIndex: false,
				xyList: [{
						tit: '注册协议',
						url: 'https://h5.jht.cash/xy/jhtzcxy.html'
					},
					{
						tit: '隐私协议',
						url: 'https://h5.jht.cash/xy/jhtyxxysdk.html'
					}, {
						tit: '共享授权协议',
						url: 'https://h5.jht.cash/xy/jhtgxxy.html'
					},
					{
						tit: '风险告知书',
						url: 'https://oss.jht.jht.cash/img/20250530/566r2pgG.html'
					},

				],
				xyActive: null,
				phone: "",
				smsCode: "",
				isWeixin: false,
				isOpen: 1,
				count: 60, // 倒计时总秒数
				timer: null, // 定时器
			}

		},
		async onShow() {

			// 用户免登录
			this.tokens = JSON.parse(localStorage.getItem('tokens'));
			if (this.tokens) {
				// copy 取得   
				uni.setStorageSync('token', this.tokens);
				let pppp = await oldRegisterV5()
				this.goPagesList(pppp)
			}
			// 用户免登录
			this.$ymmd({
				name: '首页',
				age: "23"
			})

		},

		async onLoad(option) {
			// 获取跳转过来的链接结束
			let queryParams = {}
			var PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
								MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC41n1LMlYKesjPaLEYjEg2R7AZ
								1lOdyjudhTvKrXEdQc9XrxtZIJZhQhmkyZquBsUrtxzRaLIraIhUWbxmaaBiqbLE
								bFWduIIcqbtnSEE2zZhBOqdnj3qa1YzEbo6bOEUB0cGWMy0yNlQBGJVMFAFIywEL
								4Diuf3ByF5Fs5Xs4YwIDAQAB
								-----END PUBLIC KEY-----`;
			var encryptContext = new JSEncrypt();
			encryptContext.setPublicKey(PUBLIC_KEY);
			var data = {
				time: new Date().getTime(),
				sign: 'zsSuzfL0f5'
			};
			data = JSON.stringify(data);
			var encryptedData = encryptContext.encryptLong(data);
			this.init(encryptedData)
			this.phone = uni.getStorageSync('phone');
		},
		beforeDestroy() {
			if (this.timer) { // 组件销毁前清除定时器，防止内存泄漏
				clearInterval(this.timer);
			}
		},
		methods: {
			onRealInputBlur() {
			    // 输入框失焦时再次聚焦（让用户连续输完）
			    this.focusRealInput();
			  },
			focusRealInput() {
			    this.realInputFocused = false; 
			    this.$nextTick(() => {
			      this.realInputFocused = true;
			    });
			  },
			    openDialog() {
			      this.code = ''
			      this.showDialog = true
			    },
			    cancelDialog() {
			      this.showDialog = false;
				  this.smsCode = ''
			    },
			    confirmDialog() {
			      if (!this.code) {
			        uni.showToast({ title: '请输入验证码', icon: 'none' })
			        return
			      }
			      uni.showToast({ title: '验证码已提交', icon: 'success' })
			      this.showDialog = false
			    },
			inputFn(e) {
				if (this.phone.length == 11) {
					// this.sendCode()
				}
			},
			inputFnYzm(e) {
				if (this.smsCode.length == 4) {
					this.tyBtnIndex=true
					this.loginclick()
					this.showDialog = false;
				}
			},
			closeBackAffirm() {
				this.$refs.backAffirm.close()
				this.$refs.surePageLj.close()

			},
			async init(encryptedData) {
				var iswx = 0
				let res = await checkChannelV1()
				// 微信浏览器条件下运行   
				if (this.isWeiXinBrowser()) {
					iswx = 1
					if (res.data.wxopen == 0) {
						this.isWeixin = true
					} else if (res.data.wxopen == 1) {
						this.isWeixin = false
					}
				} else {
					iswx = 0
				}
				if (res.data.status == 0) {
					// 404
					this.isOpen = -1
				} else {
					this.isOpen = 1
					var hostname = location.hostname

				}

				let ddd = {
					"mobile": '',
					"type": 1,
					"sign": encryptedData,
					"iswx": iswx
				}
				let res2s = await clickChannel(ddd)
			},
			// 打开协议
			xyBtn(item, index) {
				this.xyActive = index
				console.log(item, '这是啥啊')
				this.$refs.xyPup.open()
			},
			// 是否同意
			tyBtn() {
				this.tyBtnIndex = !this.tyBtnIndex
			},
			isWeiXinBrowser() {
				// #ifdef H5
				// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
				let ua = window.navigator.userAgent.toLowerCase()
				// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true
				} else {
					return false
				}
				// #endif
				return false
			},
			async newCode(){
			  // 清除旧定时器（防止多次点击重叠）
			  if (this.timer) {
			    clearInterval(this.timer);
			    this.timer = null;
			  }
			
			  // 重置倒计时为 60 秒
			  this.count = 60;
			
			  // 启动新的倒计时
			  this.timer = setInterval(() => {
			    if (this.count > 0) {
			      this.count -= 1;
			    } else {
			      clearInterval(this.timer);
			      this.timer = null; // 防止内存泄漏
			    }
			  }, 1000);
				this.$ymmdBtn("ymBtnCode", {
					name: '验证码',
					phone: this.phone
				})
				uni.showLoading({
					title: '正在发送验证码',
				
				});
				let timestamp1 = new Date().getTime();
				let newStr = timestamp1.toString().slice(0, -4) + timestamp1.toString().slice(-3);
				
				let sk = w_md5.hex_md5_32(newStr + this.phone);
				let data = {
					"mobile": this.phone,
					"sk": sk,
					"timestamp": timestamp1,
					"type": 1
				}
				let rrr = await sendSmsCode(data)
				if (rrr.code == 100000) {
					this.$ts("发送成功!")
					uni.hideLoading();
					// this.startCountdown();
					this.showDialog = true;
				}
				
			},

			async sendCode() {

				let regex = /^1[3-9]\d{9}$/;
				if (!regex.test(this.phone)) {
					this.ts("请输入正确的手机号码")
					return;
				}else if (!this.tyBtnIndex) {
					this.ts("请同意并勾选协议")
					return;
				}
				
				this.timer = setInterval(() => {
				  if (this.count > 0) {
				    this.count -= 1;
				  } else {
				    clearInterval(this.timer);
				    this.timer = null; // 防止内存泄漏
				  }
				}, 1000);
				this.$ymmdBtn("ymBtnCode", {
					name: '验证码',
					phone: this.phone
				})
				uni.showLoading({
					title: '正在发送验证码',

				});
				let timestamp1 = new Date().getTime();
				let newStr = timestamp1.toString().slice(0, -4) + timestamp1.toString().slice(-3);

				let sk = w_md5.hex_md5_32(newStr + this.phone);
				let data = {
					"mobile": this.phone,
					"sk": sk,
					"timestamp": timestamp1,
					"type": 1
				}
				let rrr = await sendSmsCode(data)
				if (rrr.code == 100000) {
					this.$ts("发送成功!")
					uni.hideLoading();
					// this.startCountdown();
					this.showDialog = true;
				}

			},
			// startCountdown() {
			// 	this.count -= 1;
			// 	this.timer = setInterval(() => {
			// 		if (this.count > 0) {
			// 			this.count -= 1;
			// 		} else {
			// 			clearInterval(this.timer); // 清除定时器
			// 			this.count = 60
			// 		}
			// 	}, 1000);
			// },
			async loginclick() {
				let regex = /^1[3-9]\d{9}$/;
				// if (!regex.test(this.phone)) {
				// 	this.ts("请输入正确的手机号码")
				// 	return;
				// } else if (!this.tyBtnIndex) {
				// 	this.ts("请同意并勾选协议")
				// 	return;
				// }
				// this.$ymmdBtn("ymBtnLogin", {
				// 	name: '点击登录',
				// 	phone: this.phone,
				// 	code: this.smsCode,
				// })
				let phoneStr = this.phone
				var that = this
				var sk = w_md5.hex_md5_32(phoneStr + "Nas1WjGRGe");
				uni.showLoading({})
				let data = {
					"mobile": phoneStr,
					"sk": sk,
					"code": this.smsCode,
				}
				let res1 = await login(data)
				uni.setStorageSync('token', res1.data.userMess.token);
				uni.setStorageSync('userInfo', res1.data);
				localStorage.setItem('tokens', JSON.stringify(res1.data.userMess.token));
				if (res1.code == 100000) {


					let data2 = {
						"mobile": phoneStr,
						"type": 2
					}
					let res2 = await clickChannel(data2)

				}
				// return;
				this.goPagesList(res1)
			},
			goPagesList(res1) {
				let that = this
				var url = "";
				switch (res1.data.page) {
					case "form":
						url = "/pagesA/form/index"
						break;
					case "list":
						url = "/pagesC/list/index"
						break;
					case "sure1":
					case "sure2":
					case "shop":
						url = "/pagesA/form/index"
						break;
					// case "form_match":
					// 	const data = encodeURIComponent(JSON.stringify(res1.data.userinfo));
					// 	url = `/pagesA/form/indexOld?type=1&userInfo=${data}`;
					// 	break;
					case "end":
						url = `/pagesE/result/index`;
						break;
				}
				if (url.length > 0) {
					uni.navigateTo({
						url: url
					})
				}
			},
			ts(tit) {
				uni.showToast({
					title: tit,
					icon: 'none',
					duration: 2000
				})
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
				this.$refs.backAffirm.close()
			},

		},
			watch: {
			  showDialog(val) {
				if (val) {
				  this.smsCode = ''; // 每次打开弹框也清空一次
				}
			  }
			}
		
	}
</script>
<style scoped>
	.dialog-title-box {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 30rpx 0;
	}
	
	.line {
	  flex: 1;
	  height: 2rpx;
	  background-color: #ddd;
	  margin: 0 10rpx;
	}
	
	.diamond {
	  width: 8rpx;
	  height: 8rpx;
	  background-color: #ddd;
	  transform: rotate(45deg);
	  margin: 0 6rpx;
	}
	
	.title-text {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	  white-space: nowrap;
	}



	.code-box {
	  position: relative;
	  display: flex;
	  justify-content: center;
	  gap: 20rpx;
	  margin: 40rpx 0;
	}
	
	.code-display {
	  width: 80rpx;
	  height: 80rpx;
	  border: 1px solid #ddd;
	  border-radius: 10rpx;
	  text-align: center;
	  font-size: 36rpx;
	  color: #333;
	  background-color: #f9f9f9;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.real-input {
	  position: absolute;
	  opacity: 0;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  z-index: 1;
	}

	.code-input {
	  width: 80rpx;
	  height: 80rpx;
	  border: 1px solid #ddd;
	  border-radius: 10rpx;
	  text-align: center;
	  font-size: 36rpx;
	  color: #333;
	  background-color: #f9f9f9;
	}

	.dialog-mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.4);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	}
	
	.dialog-box {
	  background-color: #fff;
	  border-radius: 20rpx;
	  padding: 40rpx 30rpx;
	  width: 670rpx;
	  height: 444rpx;
	  box-sizing: border-box;
	  text-align: center;
	}
	
	.dialog-title {
	  font-size: 34rpx;
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 10rpx;
	}
	
	.dialog-subtitle {
	  font-size: 26rpx;
	  color: #999;
	  margin-bottom: 30rpx;
	}
	
	.code-box {
	  display: flex;
	  justify-content: center;
	  gap: 20rpx;
	  margin-bottom: 30rpx;
	}
	
	.code-input {
	  width: 80rpx;
	  height: 80rpx;
	  border: 1px solid #e0e0e0;
	  border-radius: 10rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 36rpx;
	  color: #333;
	  background-color: #f9f9f9;
	}
	
	.resend-btn {
	  color: #007aff;
	  font-size: 28rpx;
	  /* margin-top: 15rpx; */
	}

	.xyPup {
		width: 100%;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		height: 65vh;
	}
	.ty-img {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	.bigBox{
		  position: relative;
		  width: 100%;
		  height: 100%;
		  background-image: url('@/static/login/首页切图.png');
		  background-size: cover;
		  background-position: center;
		  background-repeat: no-repeat;
	}
	.page{
		background-size: 100% 100%;
	}
	.box_1 {
	  position: relative;
	  width: 750rpx;
	  height: 402rpx;
	  flex-direction: row;
	  display: flex;
	}
	.box_2 {
	  width: 352rpx;
	  height: 276rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 30rpx 0 0 112rpx;
	}
	.text_1 {
	  width: 270rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(153,153,153,1.000000);
	  font-size: 24rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin-left: 60rpx;
	}
	.text_2 {
	  text-shadow: 0px 4px 8px rgba(109,137,176,0.410000);
	  width: 168rpx;
	  height: 100rpx;
	  overflow-wrap: break-word;
	  color: #3E77F2;
	  font-size: 84rpx;
	  font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  text-shadow: 0px 8px 16px rgba(109,137,176,0.41);
	  line-height: 84rpx;
	  margin: 28rpx 0 0 116rpx;
	  text-transform: none;
	}
	.text-wrapper_1 {
	  width: 352rpx;
	  height: 100rpx;
	  margin-top: 8rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	}
	.text_3 {
	  text-shadow: 0px 4px 8px rgba(109,137,176,0.410000);
	  width: 168rpx;
	  height: 100rpx;
	  overflow-wrap: break-word;
	  color: rgba(62,119,242,1.000000);
	  font-size: 84rpx;
	  font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 84rpx;
	    text-shadow: 0px 8px 16px rgba(109,137,176,0.41);
	  text-transform: none; 
	  
	}
	.text_4 {
	  text-shadow: 0px 8px 16px rgba(109,137,176,0.41);
	  width: 168rpx;
	  height: 100rpx;
	  overflow-wrap: break-word;
	  color: #333333;
	  font-size: 84rpx;
	  font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 84rpx;
	  text-transform: none;
	  position: relative;
	  z-index: 20;
	}
	/* .box_3 {
	  background-color: rgba(185,214,255,0.3);
	  border-radius: 100%;
	  width: 294rpx;
	  height: 332rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 58rpx 26rpx 0 -34rpx;
	} */
	.box_4 {
		width: 294rpx;
		height: 332rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	  /* background-color: rgba(182,233,255,0.3); */
	  
	  border-radius: 100%;
	  position: absolute;
	  left: -84rpx;
	  top: -10rpx;
	  width: 294rpx;
	  height: 332rpx;
	  display: flex;
	  flex-direction: column;
	}
	.text_5 {
	  width: 128rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1.000000);
	  font-size: 32rpx;
	  font-family: PingFang SC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 40rpx 0 0 112rpx;
	}
	.text_6 {
	   text-shadow: 0px 8px 16px rgba(109,137,176,0.41);
	  width: 168rpx;
	  height: 100rpx;
	  overflow-wrap: break-word;
	 color: #333333;
	  font-size: 84rpx;
	 font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  font-style: normal;
	  line-height: 84rpx;
	  margin: 28rpx 0 36rpx 136rpx;
	text-transform: none;
	}
	.image_2 {
	  width: 750rpx;
	  height: 68rpx;
	  margin-top: 1424rpx;
	}
	.box_5 {
	  position: absolute;
	  left: 0rpx;
	  top: 402rpx;
	  /* width: 750rpx;
	  height: 1426rpx; */
	  display: flex;
	  flex-direction: column;
	}
	.section_1 {
	 background-image: url(@/static/login/Group 1142815186.png);
	 background-size: cover;
	 background-position: center;
	 background-repeat: no-repeat;
	  border-radius: 16rpx;
	  height: 572rpx;
	  display: flex;
	  flex-direction: column;
	  width: 702rpx;
	  margin-left: 24rpx;
	  position: relative;
	  z-index: 1000;
	}
	.group_1 {
	  border-radius: 18rpx;
	  position: absolute;
/* 	  width: 658rpx;
	  height: 338rpx; */
	  display: flex;
	  flex-direction: column;
	  margin: -188rpx 0 0 22rpx;
	  z-index:1
	}
	.text_7 {
	  width: 186rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(27,98,211,1.000000);
	  font-size: 24rpx;
	  font-family: PingFang SC-Medium;
	  font-weight: 500;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 240rpx 0 0 236rpx;
	}
	.group_2 {
	  background-color: rgba(243,108,69,0.240000);
	  width: 338rpx;
	  height: 28rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 60rpx 0 0 168rpx;
	}
	.text_8 {
	  width: 306rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(125,63,21,0.500000);
	  font-size: 24rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 14rpx 0 46rpx 188rpx;
	}
	.group_3 {
	  /* box-shadow: 0px -4px 9px 0px rgba(103,148,255,0.610000); */
	  /* background-color: rgba(62,119,242,1.000000); */
	  border-radius: 16rpx;
	  position: absolute;
	  left: -22rpx;
	  top: 430rpx;
	  width: 702rpx;
	  height: 324rpx;
	  display: flex;
	  flex-direction: column;
	}
	.text-wrapper_2 {
	  background-color: rgba(142,171,255,1.000000);
	  border-radius: 12rpx;
	  height: 88rpx;
	  display: flex;
	  flex-direction: column;
	  width: 646rpx;
	  margin: 24rpx 0 0 28rpx;
	}
	.text_9 {
	  width: 434rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,255,255,1.000000);
	  font-size: 28rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 24rpx 0 0 106rpx;
	}
	.image-text_1 {
	  width: 620rpx;
	  height: 38rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 18rpx 0 0 28rpx;
	}
	.box_6 {
	  background-color: rgba(255,255,255,1.000000);
	  width: 24rpx;
	  height: 24rpx;
	  margin-top: 8rpx;
	  display: flex;
	  flex-direction: column;
	}
	.text-group_1 {
	  width: 586rpx;
	  height: 38rpx;
	  overflow-wrap: break-word;
	  color: rgba(238,238,238,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	.box_7 {
	  background-color: rgba(255,242,229,1.000000);
	  border-radius: 12rpx;
	  width: 646rpx;
	  height: 88rpx;
	  display: flex;
	  flex-direction: row;
	  margin: 16rpx 0 22rpx 28rpx;
	}
	.image-text_2 {
	  width: 192rpx;
	  height: 40rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 24rpx 0 0 256rpx;
	}
	.text-group_2 {
	  width: 200rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(125,63,21,1.000000);
	  font-size: 32rpx;
	  font-family: PingFang SC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	.thumbnail_1 {
	  width: 28rpx;
	  height: 28rpx;
	  margin-top: 12rpx;
	}
	.text_10 {
	  position: absolute;
	  left: 176rpx;
	  top: 268rpx;
	  overflow-wrap: break-word;
	  color: rgba(62,119,242,1.000000);
	  font-size: 84rpx;
	  font-family: DIN-Bold;
	  font-weight: 700;
	  text-align: left;
	  white-space: nowrap;
	}
	.section_2 {
	  width: 696rpx;
	  height: 44rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 50rpx 0 0 24rpx;
	}
	.block_1 {
		width: 200rpx;
		height: 8rpx;
		background: linear-gradient( -90deg, #3E77F2 0%, rgba(60,117,242,0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.text_11 {
	  width: 256rpx;
	  height: 44rpx;
	  overflow-wrap: break-word;
	  color: rgba(62,119,242,1.000000);
	  font-size: 32rpx;
	  font-family: PingFang SC-Semibold;
	  font-weight: 600;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 32rpx;
	  margin-left: 20rpx;
	}
	.block_2 {
	width: 200rpx;
	height: 8rpx;
	background: linear-gradient( 90deg, #3E77F2 0%, rgba(60,117,242,0) 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.list_1 {
	  width: 600rpx;
	  height: 118rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 50rpx 0 0 72rpx;
	}
	.image-text_3-0 {
	  width: 112rpx;
	  height: 118rpx;
	  margin-right: 132rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	.label_1-0 {
	  width: 72rpx;
	  height: 72rpx;
	  margin-left: 20rpx;
	}
	.text-group_3-0 {
	  width: 112rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1.000000);
	  font-size: 28rpx;
	  font-family: PingFang SC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 28rpx;
	  margin-top: 6rpx;
	}
	.image-text_3-1 {
	  width: 112rpx;
	  height: 118rpx;
	  margin-right: 132rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	.label_1-1 {
	  width: 72rpx;
	  height: 72rpx;
	  margin-left: 20rpx;
	}
	.text-group_3-1 {
	  width: 112rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1.000000);
	  font-size: 28rpx;
	  font-family: PingFang SC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 28rpx;
	  margin-top: 6rpx;
	}
	.image-text_3-2 {
	  width: 112rpx;
	  height: 118rpx;
	  margin-right: 132rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	.label_1-2 {
	  width: 72rpx;
	  height: 72rpx;
	  margin-left: 20rpx;
	}
	.text-group_3-2 {
	  width: 112rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1.000000);
	  font-size: 28rpx;
	  font-family: PingFang SC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 28rpx;
	  margin-top: 6rpx;
	}
	.text_12 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 40rpx 0 0 44rpx;
	}
	.text_13 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_14 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_15 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_16 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_17 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_18 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_19 {
	  width: 520rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 118rpx;
	}
	.text_20 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_21 {
	  width: 670rpx;
	  height: 56rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_22 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 0 44rpx;
	}
	.text_23 {
	  width: 670rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(163,162,162,1.000000);
	  font-size: 20rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin: 10rpx 0 4rpx 44rpx;
	}
	.section_3 {
	  position: absolute;
	  background-size: 100% 100%;
	  left: 0rpx;
	  top: -44rpx;
	  width: 750rpx;
	  height: 96rpx;
	  display: flex;
	  flex-direction: column;
	}
	.image_3 {
	  position: absolute;
	  left: 390rpx;
	  top: -254rpx;
	  width: 408rpx;
	  height: 344rpx;
	}
	.block_3 {
	  border-radius: 18rpx;
	  position: absolute;
	  left: 60rpx;
	  top: -42rpx;
	  width: 456rpx;
	  height: 62rpx;
	  border: 1px solid rgba(255,255,255,1);
	  flex-direction: row;
	  display: flex;
	  justify-content: center;
	  background-color: rgba(223, 234, 253, 0.52);
	}
	.block_4 {
	  width: 24rpx;
	  height: 24rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 18rpx 0 0 16rpx;
	}
	.text_24 {
	  width: 98rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 24rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 12rpx 0 0 6rpx;
	}
	.block_5 {
	  width: 24rpx;
	  height: 24rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 18rpx 0 0 20rpx;
	}
	.text_25 {
	  width: 98rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 24rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 12rpx 0 0 6rpx;
	}
	.block_6 {
	  width: 24rpx;
	  height: 24rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 18rpx 0 0 20rpx;
	}
	.text_26 {
	  width: 98rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 24rpx;
	  font-family: PingFang SC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin: 12rpx 16rpx 0 6rpx;
	}
	.image_4 {
	  position: absolute;
	  left: 430rpx;
	  top: -200rpx;
	  width: 82rpx;
	  height: 108rpx;
	}
	.image_5 {
	  position: absolute;
	  left: 478rpx;
	  top: 566rpx;
	  width: 106rpx;
	  height: 106rpx;
	}
</style>